<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<search-slot>
			<template #left>
				<view class="search-xiaoxi text-center">
					<text class="iconfont icon-xiaoxi search-size"></text>
				</view>
			</template>
			<template #center>
				<view class="search-search flex-1 text-muted" @click="goSearch">请输入搜索内容</view>
			</template>
			<template #right>
				<view class="search-saoma text-center" @click="getScanCode">
					<text class="iconfont icon-saoma search-size"></text>
				</view>
			</template>
		</search-slot>
		<!-- #endif -->
		<scroll-view scroll-x="true" :scroll-into-view="scrollinto" scroll-with-animation="true">
			<view class="d-flex">
				<view v-for="(item,index) in tabbars" :key="index" :id="'tab'+index" class="flex-shrink mx-2"
					:class="currentIndex==index?'active':''" @click="changeIndex(index)">{{item.name}}</view>
			</view>
		</scroll-view>
		<swiper :style="'height:'+scrollH" :current="currentIndex" @change="changeTitle">
			<swiper-item v-for="(newItem,i) in newItems" :key="i">
				<view class="swiper-item">
					<scroll-view scroll-y="true" :style="'height:'+scrollH" @scrolltolower="scrolltolower(i)">
						<template v-if="newItem.list.length>0">
							<block v-for="(item,j) in newItem.list" :key="j">
								<template v-if="item.type=='swiper'">
									<swiper-banner :swipers="item.data" :height="350"></swiper-banner>
								</template>
								<template v-else-if="item.type=='indexnavs'">
									<fast-navs :pagges="pagges"></fast-navs>
								</template>
								<template v-else-if="item.type=='threeAdv'">
									<three-adv :news="item.data"></three-adv>
									<divider></divider>
								</template>
								<template v-else-if="item.type=='oneAdv'">
									<one-adv :title="item.data.title" :cover="item.data.cover"></one-adv>
								</template>
								<template v-else-if="item.type=='list'">
									<common-list :news="item.data"></common-list>
								</template>
							</block>
							<template>
								<view class="text-center text-muted my-2">{{newItem.loadmore}}</view>
							</template>
						</template>
						<template v-else-if="newItem.forward=='before'">
							<view class="text-center text-muted my-2">加载中...</view>
						</template>
						<template v-else>
							<view class="text-center text-muted my-2">暂无数据</view>
						</template>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
		<sk-index v-if="loading"></sk-index>
	</view>
</template>


<script>
	import {
		getHome,
		getPage
	} from '../../api/index.js'
	export default {
		data() {
			return {
				scrollH: 0,
				scrollinto: '',
				currentIndex: 0,
				newItems: [],
				tabbars: [],
				loading: true
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (e) => {
					this.scrollH = e.windowHeight - uni.upx2px(168) + 'px'
				}
			})
		},
		computed: {
			pagges() {
				let page = []
				let index = this.currentIndex;
				let obj = this.newItems[index]
				if (obj) {
					obj.list.forEach(item => {
						if (item.type == 'indexnavs') {
							let objnavs = Object.values(item.data)
							objnavs.map((v, i) => {
								let p = Math.floor(i / 8)
								if (!page[p]) {
									page[p] = []
								}
								page[p].push(v)
							})

						}
					})
				}
				console.log(page)
				return page;
			}
		},
		mounted() {
			getHome().then(res => {
				console.log('res:', res);
				this.tabbars = res.data.category
				for (var i = 0; i < this.tabbars.length; i++) {
					let forward = i == 0 ? 'after' : 'before'
					let obj = {
						list: [],
						loadmore: '加载更多...',
						forward: forward
					}
					if (i == 0) {
						obj.list = res.data.data
					}
					this.newItems.push(obj)
				}
				console.log(this.newItems);
				this.loading = false
			})
		},
		onNavigationBarButtonTap(e) {
			console.log(e.index);
		},
		onNavigationBarSearchInputChanged() {
			uni.navigateTo({
				url: '/pages/search/search'
			})
		},
		methods: {
			getpage(callback = false) {
				let index = this.currentIndex;
				let id = this.tabbars[index].id;
				let obj = this.newItems[index];
				let page = Math.ceil(obj.list.length / 5) + 1;
				if (page == 1) {
					obj.forward = 'before'
				}
				getPage(id, page).then(res => {
					console.log('page:', page)
					let data = res.data;
					obj.list = [...obj.list, ...data]
					obj.loadmore = data.length < 5 ? '没有更多了...' : '加载更多...'
					obj.forward = 'after'
				})
				if (typeof callback == 'function') {
					callback()
				}
			},
			//标题切换
			changeTitle(e) {
				this.currentIndex = e.detail.current
				this.scrollLeft = this.itemIndex * this.currentIndex - 100
				if (this.newItems[this.currentIndex].forward == 'after') {
					return;
				} else {
					this.getpage()
				}
			},
			// 鼠标拉拽触底
			scrolltolower(i) {
				console.log('cnm触底了');
				let obj = this.newItems[i]
				if (obj.loadmore != '加载更多...') {
					return;
				} else {
					obj.loadmore = '加载中';
					setTimeout(() => {
						this.getpage(() => {
							uni.showToast({
								title: '加载成功'
							})
						});
					}, 1000)
				}
			},
			getScanCode() {
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			//切换标题栏
			changeIndex(index) {
				this.currentIndex = index,
					this.scrollinto = 'tab' + (index - 3);
				if (this.newItems[index].forward == 'after') {
					return;
				} else {
					this.getpage()
				}
			}
		}
	}
</script>
<style scoped>
	.search-saoma,
	.search-xiaoxi {
		width: 44rpx;
		height: 44rpx;
	}

	.search-search {
		height: 60rpx;
		line-height: 60rpx;
		text-indent: 20rpx;
		background-color: #f0f0f0;
		border-radius: 15rpx;
		font-size: 24rpx;
	}

	.search-size {
		font-size: 32rpx;
	}

	.nav-title {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #f4f4f4;
	}

	.nav-title view {
		font-size: 28rpx;
	}
</style>